<template>
  <div>
    <el-container>
      <!--侧边栏  -->
      <el-aside :width="asideWidth" style="min-height: 100vh;  background-color: #001529">
        <div style="height: 60px; display: flex; color: white; align-item: center; justify-content: center;">
          <img class="logo-img" :src="'../../../static/img/logo.png'" alt="" style="width: 40px; height: 40px; border-radius: 50%">
          <span class="logo-title" v-show="!isCollapse">心灵课堂</span>
        </div>
        <el-menu :collapse="isCollapse" :collapse-transition="false" router
                 style="border: none; background-color: #001529" text-color="rgba(255,255,255,0.65)"
                 active-text-color="#FFFFFF" :default-active="$route.path">
          <el-menu-item v-if="userInfo.userType === 0" index="/HomePage">
            <i class="el-icon-house"></i>
            <span slot="title">班级课堂专注度</span>
          </el-menu-item>
          <el-menu-item v-else index="/Student/HomePage">
            <i class="el-icon-house"></i>
            <span slot="title">我的课堂专注度</span>
          </el-menu-item>
          <el-menu-item v-if="userInfo.userType === 0" index="/Student/HomePage">
            <i class="el-icon-s-custom"></i>
            <span>学生近期专注度</span>
          </el-menu-item>
          <el-submenu index="/info">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/user/profile">我的信息</el-menu-item>
            <el-menu-item v-if="userInfo.userType === 0" index="/StudentInfo">班级学生信息</el-menu-item>
<!--            <el-menu-item index="/b">系统首页</el-menu-item>
            <el-menu-item index="/c">系统首页</el-menu-item>
            <el-menu-item index="/d">系统首页</el-menu-item>-->
          </el-submenu>

<!--          <el-menu-item index="/b">
            <i class="el-icon-menu"></i>
            <span>信息管理</span>
          </el-menu-item>
          <el-menu-item index="/b">
            <i class="el-icon-menu"></i>
            <span>信息管理</span>
          </el-menu-item>
          <el-menu-item index="/b">
            <i class="el-icon-menu"></i>
            <span>信息管理</span>
          </el-menu-item>-->
        </el-menu>
      </el-aside>

      <el-container>
        <!--头部-->
        <el-header>
          <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 20px">
            <el-breadcrumb-item :to=" {path: '/Main'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to=" {path: $route.path}">{{ $route.meta.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; cursor: default">
                <img class="el-dropdown-link" :src="userInfo.avatar" alt=""
                     style="width: 40px; height: 40px; border-radius: 50%; margin: 0 5px">
                <span>{{ this.userInfo.userName }}</span>
              </div>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span v-on:click="()=>{this.$router.push('/user/profile')}">个人信息</span></el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item><span v-on:click="outLogin">退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </el-header>
        <!--主题-->
        <el-main style="background-color: lightcyan">
          <router-view @update-user-info="handleUserInfoUpdate" @update-student-info="handleStudentInfoUpdate"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {getStudentList} from '../request/api'

export default {
  name: 'Main',
  data: function () {
    return {
      isCollapse: false,
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold',
      userInfo: {
        accountNumber: null,
        userType: null,
        userName: null,
        email: null,
        phoneNumber: null,
        sex: null,
        classId: null,
        className: null,
        userId: null,
        schoolId: null,
        schoolName: null,
        realName: null,
        avatar: null
      },
      studentId: -1, // 长整数类型
      studentName: -1 // 字符串类型
    }
  },
  methods: {
    handleCollapse: function () {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
    outLogin: function () {
      console.log('退出登录')
      sessionStorage.removeItem('userInfo')
      this.$router.push('/login')
      // 刷新页面
      window.location.reload()
    },
    handleUserInfoUpdate (updatedUserInfo) {
      // 更新Main中的userInfo数据
      console.log('更新Main中的userInfo数据')
      console.log(updatedUserInfo)
      this.userInfo = JSON.parse(JSON.stringify(updatedUserInfo))// 深拷贝
    },
    handleStudentInfoUpdate (studentId, stuentName) {
      console.log('更新Main中的student Id、Name数据' + studentId + '-' + stuentName)
      this.studentId = studentId
      this.studentName = stuentName
      sessionStorage.setItem('studentInfo', JSON.stringify({
        studentId: this.studentId,
        studentName: this.studentName
      }))
      this.$router.push('/Student/HomePage')
    }
  },
  created () {
    const userInfoStr = sessionStorage.getItem('userInfo')
    console.log('进入main界面' + userInfoStr)
    const userInfo = JSON.parse(userInfoStr)
    if (userInfo === null) {
      this.$router.push('/login')
    }
    this.userInfo.accountNumber = userInfo.accountNumber
    this.userInfo.userType = userInfo.userType
    this.userInfo.userName = userInfo.userName
    console.log('用户名' + userInfo.userName)
    this.userInfo.email = userInfo.email
    this.userInfo.phoneNumber = userInfo.phoneNumber
    this.userInfo.sex = userInfo.sex
    this.userInfo.classId = userInfo.classId
    this.userInfo.className = userInfo.className
    this.userInfo.userId = userInfo.userId
    this.userInfo.schoolId = userInfo.schoolId
    this.userInfo.schoolName = userInfo.schoolName
    this.userInfo.realName = userInfo.realName
    this.userInfo.avatar = userInfo.avatar
    console.log('头像')
    console.log(this.userInfo.avatar)

    if (this.userInfo.userType === 0) {
      getStudentList({
        pageNum: 1,
        pageSize: 1,
        schoolId: this.userInfo.schoolId,
        classId: this.userInfo.classId
      }).then(resp => {
        if (resp.responseCode === 20007) {
          if (resp.data.length > 0) {
            this.studentId = resp.data[0].userId
            this.studentName = resp.data[0].realName
          }
        }
        sessionStorage.setItem('studentInfo', JSON.stringify({
          studentId: this.studentId,
          studentName: this.studentName
        }))
      })
    }
  }
}
</script>

<style>
.el-menu--inline {
  background-color: #000c17 !important;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 53px !important;
}

.el-menu-item:hover, .el-submenu__title:hover {
  color: cyan !important;
  background-color: #0f71dc !important;
}

.el-menu-item:hover i, .el-submenu__title:hover i {
  color: cyan !important;
  background-color: #0f71dc !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width: calc(100% - 8px) !important;
  margin-left: 4px !important;
}

.el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
  margin-left: -4px;
}

.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu__icon-arrow {
  margin-top: -5px;
}

.el-submenu .el-menu-item {
  min-width: 0 !important;
}

.el-menu--inline .el-menu-item.is-active {
  padding-left: 49px !important;
}

.el-menu.el-menu--popup.el-menu--popup-right-start {
  background-color: #000c17 !important;
}

.el-menu.el-menu--popup.el-menu--popup-right-start .el-menu-item.is-active {
  padding-left: 16px !important;
}

.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s;
  margin-top: 20px;
}

.logo-img {
  margin-top: 10px;
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
}
</style>
